<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城主页</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function () {
            //页面加载完成后查询数据库
            $.post("findAllArticleServlet",function (data) {
                //返回一个数组,数组里装的每一个商品对象
                for (var i=0;i<data.length;i++) {
                    //console.log(data.pic);
                    $(".row").append("<div class='col-sm-6 col-md-4'>\n" +
                        "        <div class='thumbnail'>\n" +
                        "            <img src="+data[i].pic+">\n" +
                        "            <div class='caption'>\n" +
                        "                <h3>"+data[i].name+"</h3>\n" +
                        "                <p>可添加组件</p>\n" +
                        "                <p>\n" +
                        "                    <a href='javascript:void(0)'  onclick='pay("+data[i].id+")'  class='btn btn-primary' role='button'>Button</a>\n" +
                        "                </p>\n" +
                        "            </div>\n" +
                        "        </div>\n" +
                        "    </div>");
                }
            },"json");

            $.post("checkLogin",function (data) {
                //请求服务端是否等处于登录状态
                //{"id": ,"name": ,"password": ,"money": ,"head": ,}
                if (data!=null){
                    //已登录
                    $("#userName").text(data.name);
                    $("#userHead").attr("src",data.head);
                }else {
                    //未登录 .点击头像即可进如login.html
                    $("#userName").attr("href","login.html");
                }
            },"json");

        });

        function pay(id) {
            $.post("addOrder",{"id":id},function () {
                //添加购物车信息

            });
        }

        //退出登录
        function out() {
            $.post("outLogin",function () {
                location.href = "shop_index.html";
            });
        }

    </script>
</head>
<body>


<nav class="navbar navbar-default">
        <div class="container-fluid">

            <div class="navbar-header">
                <a class="navbar-brand" href="#">Shop</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
                    <!--下拉列表 -->
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">分类 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">测试1</a></li>
                            <li><a href="#">测试2</a></li>
                            <li><a href="#">测试3</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">测试4</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">测试5</a></li>
                        </ul>
                    </li>
                </ul>
                <!-- 搜索框 -->
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="search" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>


              <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">你好</a></li>
                    <!--个人名字 -->
                    <li><a href="javascript:void(0)" id="userName">请登录</a></li>
                    <!-- 个人头像-->
                  <li><a href="#"><img src="" id="userHead"></a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">选项 <span class="caret"></span></a>
                        <!--下拉列表 -->
                        <ul class="dropdown-menu">
                            <li><a href="#">修改密码</a></li>
                            <li><a href="shoppingCart.html">购物车</a></li>
                            <li><a href="#">Something else here</a></li>
                            <!--分隔符-->
                            <li role="separator" class="divider"></li>
                            <li><a href="javascript:out()">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


<div class="row">
    <!--每一个div代表一个商品-->

</div>


</body>
</html>